<!--
 * @Author: your name
 * @Date: 2021-11-30 13:41:22
 * @LastEditTime: 2023-11-14 14:05:08
 * @LastEditors: xiaodong 565071984@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /pocket/src/pagesWx/search/search.vue
-->
<template>
  <view class="main">
    <u-swiper :list="list" mode="dot" :effect3d="false"></u-swiper>
    <view class="li-wrap">
      <view
        class="li-item"
        v-for="(item, index) in OnlyData"
        :key="index"
        @click="goToDetail(item)"
        :style="{ height: windowWidth / 3 + 'px' }"
      >
        <u-image
          :src="imgListObj[item.menuicon]"
          width="40px"
          height="40px"
        ></u-image>
        <!-- <i :class="['iconfont', `icon-${item.menuicon}`]"></i> -->
        <span class="item-name">
          {{ item.subMenu }}
        </span>
      </view>
    </view>
    <!-- 武夷学院财务处 -->
    <u-modal
      v-model="showToast"
      :show-confirm-button="true"
      :show-cancel-button="false"
      title="武夷学院财务处"
      :show-title="false"
      :content-style="{ margin: '12px 12px' }"
    >
      <view class="slot-content">
        <u-parse
          :html="content"
          :selectable="true"
          :tag-style="style"
        ></u-parse>
        <!-- <rich-text :nodes="content"></rich-text>  -->
      </view>
    </u-modal>
  </view>
</template>

<script>
import OnlyData from '@/data/onlyOne/onlyOne.json';
export default {
  components: {
    // mpHtml,
  },
  props: {
    // options: {
    //   type: Object,
    //   default: null,
    // },
  },
  computed: {
    // ...mapState({}),
  },
  data() {
    return {
      OnlyData: OnlyData.menu,
      showToast: true,
      htmlContent: null,
      windowWidth: 0,
      imgListObj: {
        zichanpandian: require(`@/assets/images/zichanpandian.png`),
        wodehangcheng: require(`@/assets/images/wodehangcheng.png`),
        kaipiaoxinxi: require(`@/assets/images/kaipiaoxinxi.png`),
        huoche1: require(`@/assets/images/huoche1.png`),
        wodeshenqing: require(`@/assets/images/wodeshenqing.png`),
        gerenpiaojia: require(`@/assets/images/gerenpiaojia.png`),
        // wodeshenqing: require(`@/assets/images/wodeshenqing.png`),
        jixieweixiu: require(`@/assets/images/jixieweixiu.png`),
        jiudianzhusu: require(`@/assets/images/jiudianzhusu.png`),
        feiji1: require(`@/assets/images/feiji1.png`),
        huoche1: require(`@/assets/images/huoche1.png`),
        wodeshenpi: require(`@/assets/images/wodeshenpi.png`),
        gengduo: require(`@/assets/images/gengduo.png`),
        wodezhangben: require(`@/assets/images/wodezhangben.png`),
        zichanpandian: require(`@/assets/images/zichanpandian.png`),
        feiyongfenxi: require(`@/assets/images/feiyongfenxi.png`),
        shiwupandian: require(`@/assets/images/shiwupandian.png`),
        yanjiu: require(`@/assets/images/yanjiu.png`),
        // yanjiu: require(`@/assets/images/yanjiu.png`),
        ghbx: require(`@/assets/images/ghbx.png`),
      },
      content: `<span>&nbsp;&nbsp;&nbsp;&nbsp;为了方便全校师生办理报销业务，对常见财务业务办理必须提供的材料，及相关手续和流程，制定“只跑一次清单”。师生提供的业务材料在符合财经法规制度和学校相关文件规定、报销手续齐全、审批完备的情况下，业务办理实现“只跑一次”。希望我们的努力能为您提供报账便利，提高财务业务办理效率。</span> <br>
  <span>&nbsp;&nbsp;&nbsp;&nbsp;财务处将根据政策变化及时调整“只跑一次清单”，希望师生在办理业务时关注最新的《清单》要求。</span>`,
      style: {
        // 字符串的形式
        span: 'font-size: 30rpx;text-indent:2em',
      },
      list: [
        {
          image: require('@/assets/images/zhipaoyicibanner.png'),
          title: '昨夜星辰昨夜风，画楼西畔桂堂东',
        },
        // {
        //   image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
        //   title: '身无彩凤双飞翼，心有灵犀一点通',
        // },
        // {
        //   image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
        //   title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
        // },
      ],
    };
  },
  onLoad(options) {
    // console.log(options, '页面参数');
    this.initPage(options);
  },
  created() {},
  onShow() {},
  onShareAppMessage(res) {
    // let pages = getCurrentPages();
    // // 页面栈中的最后一个即为项为当前页面，route属性为页面路径
    // const currentPath = pages[pages.length - 1].route;
    // const queryParams = this.$u.queryParams(this.$Route.query);
    // const path = `${currentPath}${queryParams}`;
    // return {
    //   title: this.title || '口袋睿易',
    //   path,
    //   imageUrl: getImage('commonBaseShareBg'),
    //   desc: '查产品看内容，你值得拥有',
    // };
  },
  methods: {
    goToDetail(item) {
      this.$u.vuex('detailData', { data: item });
      this.$u.vuex('menuType', 1);
      let url = 'pages/detail/casDetail';
      if (
        item.subMenu === '薪酬劳务' ||
        item.subMenu === '科研报销' ||
        item.subMenu === '工会报账材料'
      ) {
        url = 'pages/detail/casList';
      }
      this.$u.route({
        url,
        params: {
          ...item,
        },
      });
    },
    initPage(options) {
      // console.log(this.$Route.query, '搜索页面', this.options);
      // console.log(this.$Route, '打开的域名1', options);
      // const link = this.$Route.query?.link || this.options?.link || '';
      // this.webSrc = link || '';
      // this.meSearch(options || this.options);
      try {
        const res = uni.getSystemInfoSync();
        this.windowWidth = res.windowWidth;
        console.log(res.model);
        console.log(res.pixelRatio);
        console.log(res.windowWidth);
        console.log(res.windowHeight);
        console.log(res.language);
        console.log(res.version);
        console.log(res.platform);
      } catch (e) {
        // error
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.li-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  .li-item {
    width: 33.33%;
    height: 100px;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .iconfont {
      font-size: 30px;
    }
    .item-name {
      font-size: 16px;
      margin-top: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
  }
}
</style>
